
<template>
    <el-form :model="ruleForm"   :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="商品名称" prop="name">
            <el-input v-model="ruleForm.goodsName"></el-input>
        </el-form-item>

        <el-form-item label="商品编号" prop="goodsUuid">
            <el-input v-model="ruleForm.goodsUuid"></el-input>
        </el-form-item>

        <el-form-item label="商品分类" prop="region" class="selfenlei">
            <el-select v-model="ruleForm.goodsTypeId" placeholder="请选择分类商品">
                <el-option
                        v-for="item in ruleForm.options"
                        :key="item.region"
                        :label="item.goodsTypeName"
                        :value="item.goodsTypeId">
                </el-option>
            </el-select>
        </el-form-item>

        <el-form-item label="商品简介" prop="jianjie" >
            <el-input type="textarea" v-model="ruleForm.goodsDesc" class="txtareasize" rows="4"></el-input>
        </el-form-item>

        <el-form-item label="商品标签" prop="type" class="ckbianqian">
            <el-checkbox-group v-model="ruleForm.tagIds">
                <el-checkbox
                        v-for="(item,index) in ruleForm.arrFuXuan"
                        :key="index"
                        :label="item.tagId">
                     {{item.tagName}}
                </el-checkbox>
            </el-checkbox-group>

        </el-form-item>

        <el-form-item label="限购数量" prop="num" >
            <el-input v-model="ruleForm.num" placeholder="0为不限购"></el-input>
        </el-form-item>

        <el-form-item label="虚拟销量" prop="num" >
            <el-input v-model="ruleForm.goodsVirtualSale"></el-input>
        </el-form-item>


        <el-form-item label="商品价格" prop="shopprice">
            <el-input v-model="ruleForm.goodsPrice"></el-input>
        </el-form-item>

        <el-form-item label="拼团价格" prop="price">
            <el-row :span="12">
                <el-col  :span="10" class="leftpin">
                    <span class="zi" style="text-align: left">团购人数</span>
                       <el-select v-model="ruleForm.defineGroup.defineGroupPeopleNum" placeholder="请选择拼团人数">
                            <el-option label="2" value="2"></el-option>
                            <el-option label="3" value="3"></el-option>
                            <el-option label="4" value="4"></el-option>
                        </el-select>
                </el-col>
                <el-col  :span="10" class="leftpin">
                    <span class="zi" style="text-align: left">价格</span>
                    <el-input class="inputM" v-model="ruleForm.defineGroup.defineGroupPrice"></el-input>
                </el-col>

            </el-row>


        </el-form-item>


        <el-form-item label="优惠券" prop="type" class="radioleft">
            <template>
                <el-radio-group v-model="ruleForm.goodsCoupon" >
                    <el-radio  :label="1">是</el-radio>
                    <el-radio  :label="0" >否</el-radio>
                </el-radio-group>
            </template>
        </el-form-item>

        <el-form-item label="是否上架" prop="type" class="radioleft">
            <template>
                <el-radio-group v-model="ruleForm.goodsStatus" >
                    <el-radio  :label="1">是</el-radio>
                    <el-radio  :label="0" >否</el-radio>
                </el-radio-group>
            </template>
        </el-form-item>


        <el-form-item label="使用积分" prop="type" class="radioleft">
            <template>
                <el-radio-group v-model="ruleForm.goodsPoint" >
                    <el-radio  :label="1">是</el-radio>
                    <el-radio  :label="0" >否</el-radio>
                </el-radio-group>
            </template>
        </el-form-item>

        <el-form-item label="市场价格" prop="price">
            <el-input v-model="ruleForm.goodsMarketPrice"></el-input>
        </el-form-item>


        <el-form-item label="商品规格" prop="shopsize">
             <el-button type="primary" plain  @click="addGuiGe" style="margin-left:-430px">添加</el-button>

             <el-table :data="ruleForm.goodsFormatList">
                 <el-table-column prop="name" label="名称">
                     <template slot-scope="scope">
                         <el-input class="inputM" v-model="ruleForm.goodsFormatList[scope.$index].goodsFormatName"></el-input>
                     </template>
                 </el-table-column>

                 <el-table-column prop="price" label="价格">
                     <template slot-scope="scope">
                         <el-input class="inputM" v-model="ruleForm.goodsFormatList[scope.$index].goodsFormatPrice"></el-input>
                     </template>
                 </el-table-column>

                 <el-table-column prop="kuCun" label="库存">
                     <template slot-scope="scope">
                         <el-input class="inputM" v-model="ruleForm.goodsFormatList[scope.$index].goodsFormatStock"></el-input>
                     </template>
                 </el-table-column>

                 <el-table-column prop="caoZuo" label="操作">
                     <template slot-scope="scope">
<!--                         <el-button @click="del(scope.$index)">删除</el-button>-->
                         <el-button type="danger" plain class="del" @click="delGuiGe(scope.$index)" >删除</el-button>
                     </template>
                 </el-table-column>

             </el-table>

        </el-form-item>


        <el-form-item label="商品图片" prop="shopimg">
            <el-upload  style="text-align: left"
                    action="#"
                    list-type="picture-card"
                    :auto-upload="false"
                        ref="upload"
                        :file-list="fileList"
                        :http-request="uploadFile"
                        :on-change="handleChange"


            >
                <i slot="default" class="el-icon-plus"></i>
                <div slot="file" slot-scope="{file}"    >
                    <img
                            class="el-upload-list__item-thumbnail"
                            :src="file.url" alt="">

                    <span class="el-upload-list__item-actions">
               <span
                class="el-upload-list__item-preview"
                @click="handlePictureCardPreview(file)">
                <i class="el-icon-zoom-in"></i>
              </span>
               <span
                v-if="!disabled"
                class="el-upload-list__item-delete"
                @click="handleDownload(file)">
          <i class="el-icon-download"></i>
        </span>
        <span
                v-if="!disabled"
                class="el-upload-list__item-delete"
                @click="handleRemove(file)">
          <i class="el-icon-delete"></i>
        </span>
         </span>
                </div>
            </el-upload>

            <el-dialog :visible.sync="ruleForm.dialogVisible">
                <img width="100%" :src="ruleForm.dialogImageUrl" alt="">


            </el-dialog>
        </el-form-item>

        <el-form-item label="商品相册" prop="" style="text-align: left">
            <el-upload
                    ref="pictureUpload"
                    action="/api/goods/getGoodsType"
                    list-type="picture-card"
                    :auto-upload="false"

                    multiple

            >
                <i slot="default" class="el-icon-plus"></i>

                <div slot="file" slot-scope="{file}"    :http-request="toMyFile(file)">
                    <img
                            class="el-upload-list__item-thumbnail"
                            :src="file.url" alt=""
                    >
                    <span class="el-upload-list__item-actions">
        <span
                class="el-upload-list__item-preview"
                @click="handlePictureCardPreview(file)"
        >
          <i class="el-icon-zoom-in"></i>
        </span>
        <span
                v-if="!disabled"
                class="el-upload-list__item-delete"
                @click="handleDownload(file)"
        >
          <i class="el-icon-download"></i>
        </span>
        <span
                v-if="!disabled"
                class="el-upload-list__item-delete"
                @click="handleRemove(file)"
        >
          <i class="el-icon-delete"></i>
        </span>
      </span>
                </div>
            </el-upload>

            <el-dialog :visible.sync="ruleForm.dialogVisible">
                <img width="100%" :src="ruleForm.dialogImageUrl" alt="">
            </el-dialog>
        </el-form-item>
        <el-form-item label="商品库存" prop="ckshop">
            <el-input v-model="ruleForm.goodsStock"></el-input>
        </el-form-item>
        <el-form-item label="免运费" prop="yunfei" class="mianyunfei">
            <template>
               <el-radio-group v-model="ruleForm.goodsFreeShipping">
                   <el-radio  :label="1">是</el-radio>
                   <el-radio  :label="0" >否</el-radio>
               </el-radio-group>

                <el-input v-model="ruleForm.goodsPostage" placeholder="请填写运费价格" v-if="ruleForm.goodsFreeShipping==0"></el-input>

            </template>
        </el-form-item>

        <el-form-item label="商品备注" prop="jianjie" >
            <el-input type="textarea" v-model="ruleForm.goodsRemarks" rows="6"></el-input>
        </el-form-item>

        <el-form-item class="submit">
            <el-button type="primary" plain @click="sureAdd">确定</el-button>
        </el-form-item>


    </el-form>

</template>

<script>
import qs from 'qs'
    export default {
        name: "add",
        data() {
            return {
                fileList:[],
                mfile:'',
                //表单数据
                ruleForm: {
                    //拼团人数和价格
                    defineGroup:{
                        defineGroupPeopleNum:'',
                        defineGroupPrice:'',
                    },




                    tagIds:[],                    //商品标签复选框绑定值
                    arrFuXuan:[],               //商品标签复选框动态对象

                    dialogImageUrl: '',       //相框
                    dialogVisible: false,
                    disabled: false,



                    goodsFormatList:[
                        {
                            goodsFormatName:'',
                            goodsFormatPrice:'',
                            goodsFormatStock:'',
                        }
                    ],      //商品规格三个，名字价格库存



                    options:[],
                    goodsCoupon: 1,   //优惠券
                    goodsFreeShipping:1,   //免运费
                    goodsPostage:'',  //运费价格
                    goodsStatus:1,  //是否上架
                    goodsPoint:1,  //使用积分



                    goodsName: '',    //商品名称
                    goodsUuid:'',       //商品编号
                    goodsTypeId:'',   //商品分类
                    goodsDesc:'',      //商品简介

                    num:'',         //商品限购数量
                    goodsPrice:'',    //商品价格


                    goodsMarketPrice:'',  //市场价格

                    goodsStock:'',      //商品库存

                    goodsRemarks:'',     //商品备注
                    goodsVirtualSale:'',  //虚拟销量



                },
                   rules: {

                }
            };
        },




         methods: {
            //商品图片
             handleChange(file,fileList){
                 this.fileList=fileList
             },
             uploadFile(file){
                this.formData.append('file',file.file)
             },





            //相册
            handleRemove(file) {
                console.log(file);
                this.$refs.pictureUpload.uploadFiles = []
            },
            handlePictureCardPreview(file) {
                this.ruleForm.dialogImageUrl = file.url;
                this.ruleForm.dialogVisible = true;
            },
            handleDownload(file) {
                console.log(file);
            },
             toMyFile(file){
                this.mfile=file
                 // console.log("----------------")
                 console.log(this.mfile)
             },







            //添加商品规格
            addGuiGe(){
                this.ruleForm.goodsFormatList.push({});
            },
            delGuiGe(index){
              this.ruleForm.goodsFormatList.splice(index,1);
            },

            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        alert('submit!');
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },


            //提交
            sureAdd(){
                // console.log("--123")
                // console.log(this.ruleForm.defineGroup);
                let formData = new FormData()
                formData.append('file',this.fileList[0].raw)
                // formData.append('files',this.)
                console.log('1')
                console.log(this.fileList)

                this.ruleForm.goodsFormatList = this.ruleForm.goodsFormatList.map((item)=>{
                    var obj = {...item};
                    return obj;
                })


                var params=qs.stringify({
                        tagIds:Array.from(this.ruleForm.tagIds),
                        goodsTypeId: this.ruleForm.goodsTypeId,
                        goodsName: this.ruleForm.goodsName,
                        goodsUuid: this.ruleForm.goodsUuid,

                        goodsDesc: this.ruleForm.goodsDesc,
                        num: this.ruleForm.num,
                        goodsPrice: this.ruleForm.goodsPrice,


                        'defineGroup.defineGroupPeopleNum': this.ruleForm.defineGroup.defineGroupPeopleNum,
                        'defineGroup.defineGroupPrice': this.ruleForm.defineGroup.defineGroupPrice,

                        goodsCoupon: this.ruleForm.goodsCoupon,
                        goodsStatus: this.ruleForm.goodsStatus,
                        goodsPoint: this.ruleForm.goodsPoint,
                        goodsMarketPrice: this.ruleForm.goodsMarketPrice,
                        goodsFormatList: this.ruleForm.goodsFormatList,
                        goodsStock: this.ruleForm.goodsStock,

                        goodsFreeShipping: this.ruleForm.goodsFreeShipping,     //运费
                        goodsPostage: this.ruleForm.goodsPostage,             //运费价格
                        goodsRemarks: this.ruleForm.goodsRemarks,

                        goodsVirtualSale:this.ruleForm.goodsVirtualSale,     //虚拟销量



                    }, { arrayFormat: 'indices' , allowDots: true})
                // console.log(params);

                // console.log(Array.from(this.ruleForm.tagIds))
                // var params2=qs.stringify({
                //     tagIds:[1,2,3]},{ arrayFormat: 'repeat' });
                // console.log('param2')
                // console.log(params)
                // console.log(params);
                // var fd = new FormData();
                // var fd = new FormData()
                // console.log(this.mfile)
                // fd.append('files',this.mfile.name)
                //
                // console.log("----123456")
                // console.log(fd)
                this.$axios({
                    url: '/api/goods/getGoodsType?'+params,
                    method:'post',
                    data:formData
                    // data:fd,
                    // data:params,
                    // params:params
                    // ,
                    // headers: {
                    //     'Content-Type': 'multipart/form-data'
                    // }
                }).then((res)=>{

                    console.log(res)

                })
            },

         },


         created() {
            this.$axios.post('/api/goods/getInitData').then((res)=>{
                // console.log(123)
                // console.log(res)
                // console.log(res.data.data.goodsType);
                this.ruleForm.options=res.data.data.goodsType;  //获取商品分类
                // console.log("123-------")
                // console.log(res)
                // console.log("456----")
                // console.log(res.data.data.goodsTag);
                this.ruleForm.arrFuXuan=res.data.data.goodsTag      //获取复选框
                this.ruleForm.goodsUuid=res.data.data.goodsUuid   //获取商品编号
                // console.log(this.arrFuXuan)
            })
        }
    }
</script>

<style scoped>
    .demo-ruleForm{
        width: 600px;
    }
    .selfenlei{
        text-align: left;
    }
    .ckbianqian{
        text-align: left;
    }
    .leftpin{
        margin: 5px;
    }
    .btnleft{
        text-align: left;
        margin: 5px;
    }
    .radioleft{
        text-align: left;
    }

    .zi{
        margin: 5px;
    }
    .left{
        margin-right: 10px;
    }

    .btnguige{
        margin-top: 38px;
    }

    .mianyunfei{
        text-align: left;
    }
    .submit{
        text-align: left;
    }
    /*.el-button--primary.is-plain{*/
    /*    margin-left: -430px;*/
    /*}*/

</style>
>>>>>>> origin/lx
